<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="index.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        canvas {
            margin: 50px auto 0;
            display: block;
            background: yellow;
        }
    </style>
</head>
<body>
<canvas id="canvas" width="400" height="400">
    此浏览器不支持canvas
</canvas>
</body>
</html>
<script>
    const ctx = document.getElementById('canvas')
    const gl = ctx.getContext('webgl')

    const VERTEX_SHADER_SORUCE = `
    attribute vec4 aPosition;
    void main(){
      gl_Position = aPosition;
      gl_PointSize = 15.0;
    }
  `;
    const FRAGEMNT_SHADER_SOURCE = `
    void main(){
      gl_FragColor = vec4(1.0,0.0,0.0,1.0);
    }
  `;
    // 封装后
    const program = initShader(gl, VERTEX_SHADER_SORUCE, FRAGEMNT_SHADER_SOURCE)
    const aPosition = gl.getAttribLocation(program, 'aPosition')

    // 蛇身的长度
    let points = [
        {
            x: 0,
            y: 0
        }
    ]
    // 食物坐标
    const random = {
        isConnect: true
    }
    // 移动的速度
    let orginSpeed = 0.02;
    // 行动速度
    let speed = orginSpeed;
    // 移动的方向
    let direction = 'x';
    // 允许吃掉食物的误差范围
    let base = 1.5

    document.onkeydown = (event) => {
        switch (event.keyCode) {
            case 37:
                direction = 'x';
                speed = -orginSpeed;
                break;
            case 38:
                direction = 'y';
                speed = orginSpeed;
                break;
            case 39:
                direction = 'x';
                speed = orginSpeed;
                break;
            case 40:
                direction = 'y';
                speed = -orginSpeed;
                break;
        }
    }

    function createRandow() {
        if (random.isConnect) {
            random.x = Math.random() * 2 - 1
            random.y = Math.random() * 2 - 1
            random.isConnect = false
        }
    }

    function draw() {
        gl.vertexAttrib3f(aPosition, random.x, random.y, 0.0)
        gl.drawArrays(gl.POINTS, 0, 1)
        let prex = 0;
        let prey = 0;
        for (let i = 0; i < points.length; i++) {
            if (i === 0) {
                prex = points[0].x
                prey = points[0].y
                points[0][direction] += speed
            } else {
                let {x, y} = points[i]
                points[i].x = prex
                points[i].y = prey
                prex = x;
                prey = y;
            }
            gl.vertexAttrib3f(aPosition, points[i].x, points[i].y, 0.0)
            gl.drawArrays(gl.POINTS, 0, 1)
        }
    }

    let timer = null

    function start() {
        timer = setInterval(() => {
            // 边界判断
            if (points[0].x > 1.0 || points[0].x < -1.0 || points[0].y > 1.0 || points[0].y < -1.0) {
                // alert('游戏结束')
                restart();
            }
            if (points[0].x > random.x - base * orginSpeed &&
                points[0].x < random.x + base * orginSpeed &&
                points[0].y > random.y - base * orginSpeed &&
                points[0].y < random.y + base * orginSpeed) {
                points.push({
                    x: random.x,
                    y: random.y
                })
                random.isConnect = true
            }
            createRandow();
            draw()
        }, 100)
    }

    start()

    function restart() {
        clearInterval(timer)
        points = [
            {
                x: 0, y: 0
            }
        ]
        direction = 'x'
        speed = orginSpeed
        start()
    }
</script>
